<template>
  <div class="list">
    <ul>
      <li v-for="item in sessions" :class="{ active: item.id === currentId }">
        <img class="avatar"  width="30" height="30" :alt="item.user.name" :src="item.user.img">
        <p class="name">{{item.user.name}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { useStore } from 'vuex';
import {computed} from "vue";
export default {
  setup(){
    let store = useStore()
    let sessionList=computed(() => store.state.sessions);
    let filterKey=computed(() => store.state.filterKey);
    let filterSession = ()=> {
      let result = sessionList.value.filter(session => session.user.name.includes(filterKey.value));
      return result;
    };
    let sessions=filterSession();
    return {
      sessions,
      currentId: computed(() => store.state.currentSessionId),
    };
  }
}
</script>

<style scoped>
.list li {
  padding: 12px 15px;
  border-bottom: 1px solid #292C33;
  cursor: pointer;
  transition: background-color .1s;
}
.list:hover {
   background-color: rgba(255, 255, 255, 0.03);
 }
.list .active {
   background-color: rgba(255, 255, 255, 0.1);
 }

.avatar, .name {
  vertical-align: middle;
}
.avatar {
  border-radius: 2px;
}
.name {
  display: inline-block;
  margin: 0 0 0 15px;
}

</style>